import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0,200 );
camera.lookAt(0, 0, 0);
const axesHelper = new THREE.AxesHelper( 200 );
scene.add( axesHelper );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls(camera, renderer.domElement);

const geometry = new THREE.PlaneGeometry(200, 100);

//设置uv坐标
const uvs = new Float32Array([
    0, 0.5,
    0.5, 0.5,
    0, 0,
    0.5, 0
]);
geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2); 

const loader = new THREE.TextureLoader();
const texture = loader.load('/assets/image/meishi.jpg');
texture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.MeshBasicMaterial(({
    // color: 0xffffff,
    // side: THREE.DoubleSide,
    map: texture
}));

const mesh = new THREE.Mesh(geometry, material);
console.log(mesh);
scene.add(mesh);


const loader1 = new THREE.TextureLoader();
const texture1 = loader1.load('/assets/image/muxing.jpg');
//设置纹理的重复
texture1.wrapT = THREE.RepeatWrapping;
texture1.colorSpace = THREE.SRGBColorSpace;
const geometry1 = new THREE.SphereGeometry(50);
const material1 = new THREE.MeshBasicMaterial({
    map: texture1
});
const mesh1 = new THREE.Mesh(geometry1, material1);
scene.add(mesh1);


function animate() {
    mesh1.material.map.offset.y += 0.01; // uv动画

    renderer.render( scene, camera );
    requestAnimationFrame( animate );
}
animate();